<!-- cc-button.vue -->
<template>
  <view
    class="cc-button"
    :class="[
      `cc-button--${type}`,
      `cc-button--${size}`,
      {
        'cc-button--disabled': disabled || loading,
        'cc-button--loading': loading,
        'cc-button--circle': circle,
        'cc-button--plain': plain
      }
    ]"
    :style="{
      '--theme-color': color,
      '--border-radius': borderRadius,
      '--font-color': textColor
    }"
    @click="handleClick"
    @keydown="handleKeydown"
    :hover-class="disabled || loading ? '' : 'cc-button--hover'"
    :hover-start-time="20"
    :hover-stay-time="70"
  >
    <!-- Loading 状态 -->
    <view v-if="loading" class="cc-button__loading">
      <slot name="loading">
        <view class="cc-button__loading-spinner" />
      </slot>
    </view>

    <!-- 左侧图标 -->
    <view v-if="$slots['icon-left'] || icon" class="cc-button__icon-left">
      <slot name="icon-left">
        <cc-icon :name="icon" />
      </slot>
    </view>

    <!-- 按钮内容 -->
    <text class="cc-button__text" :style="{ color: textColor }">
      <slot></slot>
    </text>

    <!-- 右侧图标 -->
    <view v-if="$slots['icon-right']" class="cc-button__icon-right">
      <slot name="icon-right"></slot>
    </view>

    <!-- 角标 -->
    <view v-if="badge !== null" class="cc-button__badge">
      {{ badge }}
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// Props 定义
const props = defineProps({
  type: {
    type: String,
    default: 'default',
    validator: (value) => ['primary', 'default', 'info', 'error', 'success'].includes(value)
  },
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  color: {
    type: String,
    default: '#000000'
  },
  textColor: {
    type: String,
    default: ''
  },
  borderRadius: {
    type: String,
    default: '5rpx'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  circle: {
    type: Boolean,
    default: false
  },
  plain: {
    type: Boolean,
    default: false
  },
  badge: {
    type: [String, Number],
    default: null
  },
  icon: {
    type: String,
    default: ''
  }
})

// Emits 定义
const emit = defineEmits(['click', 'keydown'])

// 主题处理
const isDarkTheme = ref(true)

// 计算文本颜色
const computedTextColor = computed(() => {
  if (props.textColor) return props.textColor
  if (props.plain) return props.color
  if (isDarkTheme.value) return '#ffffff'
  
  switch (props.type) {
    case 'primary': return '#ffffff'
    case 'default': return '#000000'
    default: return '#ffffff'
  }
})

// 点击处理
const handleClick = (event) => {
  if (props.disabled || props.loading) return
  emit('click', event)
}

// 键盘事件处理
const handleKeydown = (event) => {
  if (event.keyCode === 13) { // Enter 键
    handleClick(event)
  }
  emit('keydown', event)
}
</script>

<style lang="scss" scoped>
.cc-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16rpx 32rpx;
  border: 2rpx solid transparent;
  border-radius: var(--border-radius, 8rpx);
  background-color: var(--theme-color, #000000);
  color: var(--font-color, #ffffff);
  font-size: 28rpx;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;

  // 尺寸变体
  &--small {
    padding: 15rpx 24rpx;
    font-size: 24rpx;
  }
  
  &--large {
    padding: 20rpx 40rpx;
    font-size: 32rpx;
  }
  
  // 类型变体
  &--primary {
    background-color: #000000;
    color: #ffffff;
  }
  
  &--default {
    background-color: #ffffff;
    color: #000000;
    border-color: #d9d9d9;
  }
  
  &--info {
    --theme-color: v-bind('isDarkTheme ? "#525252" : "#909399"');
  }
  
  &--error {
    --theme-color: v-bind('isDarkTheme ? "#791a1a" : "#f56c6c"');
  }
  
  &--success {
    --theme-color: v-bind('isDarkTheme ? "#135c2c" : "#67c23a"');
  }
  
  // 朴素按钮样式
  &--plain {
    background-color: transparent;
    color: var(--theme-color);
    border-color: currentColor;
    
    &.cc-button--default {
      background-color: transparent;
      color: v-bind('isDarkTheme ? "#ffffff" : "#333333"');
      border-color: v-bind('isDarkTheme ? "#444444" : "#d9d9d9"');
    }
  }
  
  // 圆形按钮
  &--circle {
    border-radius: 50%;
    width: 88rpx;
    height: 88rpx;
    padding: 0;
    
    &.cc-button--small {
      width: 64rpx;
      height: 64rpx;
    }
    
    &.cc-button--large {
      width: 108rpx;
      height: 108rpx;
    }
  }
  
  // 交互状态
  &--hover {
    opacity: 0.8;
    transform: translateY(-2rpx);
  }
  
  &:active {
    opacity: 0.6;
    transform: translateY(0);
  }
  
  // 禁用状态
  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    
    &.cc-button--hover,
    &:active {
      opacity: 0.5;
      transform: none;
    }
  }
  
  // 加载状态
  &--loading {
    cursor: not-allowed;
  }
  
  // 内部元素
  &__loading {
    margin-right: 8rpx;
    
    &-spinner {
      width: 32rpx;
      height: 32rpx;
      border: 3rpx solid transparent;
      border-top-color: currentColor;
      border-radius: 50%;
      animation: cc-button-spin 1s linear infinite;
    }
  }
  
  &__icon-left,
  &__icon-right {
    display: flex;
    align-items: center;
    margin-right: 8rpx;
  }
  
  &__icon-right {
    margin-right: 0;
    margin-left: 8rpx;
  }
  
  &__badge {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    min-width: 36rpx;
    height: 36rpx;
    padding: 0 8rpx;
    background-color: #ff4d4f;
    color: #ffffff;
    font-size: 20rpx;
    line-height: 36rpx;
    text-align: center;
    border-radius: 18rpx;
    border: 2rpx solid #fff;
  }
}

@keyframes cc-button-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>